<script setup>
import { ref } from 'vue'
import { getObjectList } from '@/assets/api/device'

const props = defineProps({
    ruleVisible: {
        type: Boolean,
        required: true,
    },
    alarmObject: {
        type: Object,
        default() {
            return {}
        },
    },
})
const checkList = ref([])
const ruleList = ref([])
const emits = defineEmits(['update:ruleVisible', 'update:ruleType'])
function getData() {
    getObjectList({
        connection_status: 'True',
    }).then((res) => {
        ruleList.value = res.data
        checkList.value = res.data.filter((item) =>
            props.alarmObject.some((ele) => ele.object === item.object)
        )
    })
}
function addApplication() {
    emits('update:ruleVisible', false)
    emits('update:ruleType', true)
}
function changeCheckList(value) {
    console.log(value)
}
function ruleCloseAction() {
    emits('update:ruleVisible', false)
    emits('update:ruleType', false)
}
getData()
defineExpose({
    checkList,
})
</script>
<template>
    <el-dialog
        :model-value="ruleVisible"
        title="目标对象选择"
        width="800px"
        @close="ruleCloseAction"
    >
        <el-checkbox-group v-model="checkList" @change="changeCheckList">
            <div class="dflex d-flex-top wrap">
                <div
                    v-for="item in ruleList"
                    :key="item.id"
                    class="flex-column-bw d-flex-middle margin cursor ps-re"
                >
                    <div :class="`icon iconf-${item.ico}`"></div>
                    <el-checkbox :label="item" class="mt-10">{{
                        item.object
                    }}</el-checkbox>
                </div>
            </div>
        </el-checkbox-group>
        <div class="dflex d-flex-end">
            <div>
                <el-button type="primary" @click="addApplication"
                    >确定</el-button
                >
                <el-button @click="ruleCloseAction">取消</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<style lang="scss" scoped>
.icon::before {
    position: absolute;
    left: 50%;
    font-size: 0.13rem !important;
}
</style>
